<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="cache-control" content="max-age=0"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/common/admin_templ_style.css"/>
    <link rel="stylesheet" type="text/css" href="../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>
    <link rel="stylesheet" type="text/css" href="../api/css/jquery.colorpicker.css"/>
    <script src="../api/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../api/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../api/js/jquery.colorpicker.js"></script>
    <script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

    <script type="text/javascript">

        $(function () {
            $("#accordion").accordion();

            $(".hidden-field").hide();

            //Select show/hide option
            $("select#banner-font").bind('change', function(){
                var thisValue = $(this).val();
                if (thisValue != "")
                    $("."+thisValue).show();
            });

            $('span.close').on('click', function(){
                $(this).closest('.hidden-field').hide();
            });

            $('#font-color, #left-panel-bg-color').colorpicker(
                    {
                        parts:'full',
                        alpha:true,
                        showOn:'both',
                        buttonColorize:true,
                        showNoneButton:true
                    });

            $(".controlBtn").click(function(e){
               // $(this).closest('fieldset').hide();
                var className = $(this).parent()[0].className;
                if(className === "propertyControlBar")
                {
                    $(this).closest('fieldset').hide();
                }
                else if (className === "selector_ctr_bar")
                {
                    var h3 = $(this).closest('h3').hide();
                    var div = $(h3).next().hide();
                }
            });
        });
    </script>
    <style>
        body {
            background:none;
            height: 100%;
        }
        #theme-edit-form {
            height: calc(100% - 42px);
        }
        #theme-edit-form h2 {
            margin-bottom:20px;
        }
        #theme-edit-form h3.ui-accordion-header-active {
            color:#fff;
        }
        #theme-edit-form select {
            padding-left:0;
            white-space:nowrap;
        }
        #theme-edit-form input[type="file"]{
            width: 132px;
        }
        .theme-edit-block {
            margin-left: 10px;
            width: 21%;
        }
        .ui-accordion .theme-edit-content {
            padding:0;
        }
        .theme-edit-content ul {
            padding: 20px 5px;
        }
        .theme-edit-content li label {
            font-size:11px;
            padding-right:10px;
            width:35%;
        }
        .theme-edit-content button.ui-state-default {
            background:none;
            border: none;
        }
        .theme-edit-content span.ui-button-text {
            padding: 0;
            font-style: inherit;
        }
        .hidden-field {
            margin: 5px 0;
        }
        .hidden-field input {
            width:60px;
        }
        .hidden-field select {
            width: 77px;
        }
        .hidden-field span.close {
            padding: 1px 5px;
            display:inline-block;
            background:#aed0ea;
            color: #fff;
            border-radius:3px;
            margin-left:5px;
        }
        .hidden-field span.close:hover {
            cursor:pointer;
            background: #4F7891;
        }

        form, .kpi-preview, .kpi-drill {
            border: 1px solid #9CD6E7;
            border-radius: 5px;
            box-shadow: 0 0 100px #AADCEA;
            margin: 0 auto;
            padding-bottom: 50px;
            width: 98%;
        }

        .selector {
            border-width: 1px;
            border-style: dashed;
        }

        .propertyControlBar{
            background-color: seashell;
            float: right;
            margin-right: 5px;
            margin-top: -16px;
            padding: 1px 3px;
        }
        .controlBtn{
            background-color: gold;
            font-weight: normal;
            color: #000000;
        }

        legend {
            margin-left: 5px;
        }

        .selector_ctr_bar {
            float: right;
        }


    </style>
</head>
<body>
    <div class="tab-frame bi_admin_report_edit">
        <form method="post" METH_NAME="UPDATE" id="theme-edit-form">
            <h2>Theme Editor</h2>
            <div class="theme-edit-block" id="accordion">
                <h3>Banner
                    <span class="selector_ctr_bar">
                        <a href="#" class="controlBtn" data-food="Bacon">Add</a>
                </span>
                </h3>
                <div class="theme-edit-content">
                <fieldset class="selector">
                    <legend>body
                    </legend>
                                <span class="propertyControlBar">
                                <a href="#" class="controlBtn">Add</a>
                                    &ndash;
                                    <a href="#" class="controlBtn">Delete</a>
                                </span>
                    <ul>
                        <li>
                            <div class="font-size">
                                <label>Font Size</label>
                                <input type="text" name="font-size" value=""/>
                                <span class="close">x</span>
                            </div>
                            <div class="font-size">
                                <label>Font Family</label>
                                <input type="text" name="font-size" value=""/>
                                <span class="close">x</span>
                            </div>
                            <div class="font-size">
                                <label>Font Color</label>
                                <input type="text" name="font-size" value=""/>
                                <span class="close">x</span>
                            </div>

                        <li>
                    </ul>
                </fieldset>

                    <fieldset class="selector">
                        <legend>.header
                        </legend>
                                <span class="propertyControlBar">
                                <a href="#" class="controlBtn">Add</a>
                                    &ndash;
                                    <a href="#" class="controlBtn">Delete</a>
                                </span>
                        <ul>
                            <li>
                                <div class="font-size">
                                    <label>Font Size</label>
                                    <input type="text" name="font-size" value=""/>
                                    <span class="close">x</span>
                                </div>
                                <div class="font-size">
                                    <label>Font Family</label>
                                    <input type="text" name="font-size" value=""/>
                                    <span class="close">x</span>
                                </div>
                            <li>
                        </ul>
                    </fieldset>
            </div>
                <h3>Left Sidebar  <span
                        class="selector_ctr_bar">
                        <a href="#" class="controlBtn">Add</a>
                </span></h3>
                <div class="theme-edit-content">

                    <fieldset class="selector">
                        <legend>body
                        </legend>
                                <span class="propertyControlBar">
                                <a href="#" class="controlBtn">Add</a>
                                    &ndash;
                                    <a href="#" class="controlBtn">Delete</a>
                                </span>
                        <ul>
                            <li>
                                <div class="font-size">
                                    <label>Font Size</label>
                                    <input type="text" name="font-size" value=""/>
                                    <span class="close">x</span>
                                </div>
                                <div class="font-size">
                                    <label>Font Family</label>
                                    <input type="text" name="font-size" value=""/>
                                    <span class="close">x</span>
                                </div>
                                <div class="font-size">
                                    <label>Font Color</label>
                                    <input type="text" name="font-size" value=""/>
                                    <span class="close">x</span>
                                </div>

                            <li>
                        </ul>
                    </fieldset>
                </div>
            </div>

        </form>
    </div>

    <div id="main" style="background-color: #fff5ee;">

    </div>
</body>
</html>